<template>
  <div id="login">
    <main>
      <h2>跑腿后台管理系统</h2>
      <div class="formLogin">
        <div>
          <span class="iconfont icon-password"></span
          ><input v-model="username" type="text" placeholder="请输入用户名" />
        </div>
        <div>
          <span class="iconfont icon-password"></span
          ><input v-model="password" type="password" placeholder="请输入用户名" />
        </div>
        <button @click="login">登录</button>
      </div>
    </main>
  </div>
</template>

<script>
import { adminLogin } from "@/api/users";
export default {
  data() {
    return {
				username: '',
				password: ''
		}
  },
  methods: {
    async login() {
      try {
        const res = await adminLogin(this.username, this.password)
        // console.log(res.token)
        if (res.code == 0) {
          sessionStorage.setItem("token", res.token);
          sessionStorage.setItem("adminInfo", JSON.stringify(res.adminInfo))
          this.$router.push("/home/admin");
        }
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style scoped>
/* scoped  表示当前页面的样式 是私有的，只有当前页面可用 */
#login {
  width: 100%;
  height: 100vh;
  background: url("../assets/images/loginbg.jpg") no-repeat center center;
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#login main {
  width: 380px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
}

#login main h2 {
  margin-bottom: 15px;
}

.formLogin {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.formLogin div {
  display: flex;
  align-items: center;
  border-radius: 6px;
  margin: 0 0 15px 0;
  padding: 0 10px;
  box-sizing: border-box;
  background: #fff;
}

.iconfont {
  font-size: 24px;
}

.formLogin input {
  width: 100%;
  height: 32px;
  border: none;
  outline: none;
}

.formLogin button {
  width: 100%;
  height: 44px;
  background: #0055ff;
  border: none;
  border-radius: 6px;
  color: #fff;
}
</style>